<script setup>
import CommetnItem from './CommentItem.vue'
import { getCurrentInstance, ref, onMounted, defineEmits } from 'vue'
import request from '../../api/index.js'
const emit = defineEmits(['refreshData'])
const props = defineProps(['title', 'url', 'isLeave'])
const proxy = getCurrentInstance()?.proxy
const isComment = props.title === 'comment' ? ref(true) : ref(false)
const isRead = ref(false)
const getData = ref([])
const noRead = ref(0)
const params = ref({
  isRead: undefined,
  userId: undefined,
  articleId: undefined,
  diaryId: undefined,
})
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    totalCount: 0,
    totalPages: 1
})
onMounted(() => {
  getDataList()
})

const getDataList = body => {
  const res = request.post(props.url.get, {
    page: pagination.value.currentPage,
    pageSize: pagination.value.pageSize,
    ...params.value,
    ...body
  }).then(res => {
    if (res.data.status ==='success') {
      getData.value = res.data.data
      pagination.value = res.data.pagination
      noRead.value = res.data.noRead
    }else {
      getData.value = []
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  }) 
}
const sizeChange = (page) => {
  pagination.value.currentPage = page
  getDataList()
}
const changeRead = (item) => {
  if (item.is_read === 0) {
    request.put(`${props.url.change}/${item.ID}`).then(res => {
      if (res.data.status === 'success') {
        proxy.$message({ type: 'success', duration: 1000,  message: res.data.message })
        getDataList()
      } else {
        if (res.data.errCode >= 500 ) {
          proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
        } else {
          proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
        }
      }
    }) 
  }
}

const selectNoRead = () => {
  if (noRead.value > 0) {
    pagination.value.currentPage = 1
    isRead.value = !isRead.value
    if (isRead.value) { 
      params.value.isRead = 0
      getDataList()
    } else {
      params.value.isRead = undefined
      getDataList()
    }
  }
}

const refreshPagination = () => {
  pagination.value.currentPage = 1
}

defineExpose({
  refreshPagination
})


</script>

<template>
  <yk-space class="comment" dir="vertical" :size="16" :style="{'width': isComment ? '100%' : '450px'}">
    <yk-space>
      <div class="title">{{ isComment ? '评论' : '私信' }} {{ pagination.totalCount }}</div>
      <div class="noRead" :class="{'active':isRead, 'forbidden': noRead === 0}" @click="selectNoRead">未读 {{ noRead }}</div>
    </yk-space>
    
    <yk-scrollbar v-if="getData.length > 0" style="width: 100%;height:100%;padding-top:10px;">
      <yk-space class="content" dir="vertical" :size="16">
        <comment-item v-for="(item, index) in getData" :key="item.ID" class="item" :isComment="isComment" :dataInfo="item" @getNewInfo="getDataList" @click="changeRead(item)" />
      </yk-space>
    </yk-scrollbar>
    <yk-space v-if="getData.length > 0" class="pagination">
      <yk-pagination  v-model:current="pagination.currentPage" :default-page-size="pagination.pageSize" :total="pagination.totalCount" style="margin-top: 12px;width:100%;justify-content: flex-end;" :simple="props.title === 'message' ? true : false" @change="sizeChange"  />
    </yk-space>
    <yk-empty v-else style="width:100%;margin:auto 0;">
      <template #description>
        暂时没有{{ isComment ? '评论' : '私信' }}
      </template>
    </yk-empty>
  </yk-space>
</template>
<style scoped lang="less">
.comment {
  height: 640px;
  border-radius: 8px;
  padding:24px;
  background-color: @bg-color-l;

  .pagination{
    padding-right:24px;
    width:100%;
  }

  .title {
    font-size: 18px;
    font-weight: 600;
  }

  .noRead {
    color: @gray-6;
    line-height: 30px;

    &:hover {
      cursor: pointer;
      color:@pcolor;
    }

    &.forbidden {
      cursor: not-allowed;
      color: @gray-6;
    }
  }
  .active {
    color: @pcolor;
  }

  .content {
    overflow: hidden;
  }

  .item {
    width: 100%;
  }
}

</style>